<template>
  <div class="smartReplySetting-content padding10">
    <el-form label-width="90px" size="mini">
      <el-form-item label="是否打开:">
        <el-switch v-model="smartReplySetting.open" />
      </el-form-item>
      <el-form-item label="复读问题:">
        <el-switch v-model="smartReplySetting.repeatProblem" />
      </el-form-item>
      <el-form-item label="时间设置:">
        <div class="content win-flex-row flex-y-center flex-1">
          <div class="mr3 ml3">每</div>
          <el-input-number size="mini" v-model="smartReplySetting.startTime" controls-position="right" :min="1"
            :max="100000"></el-input-number>
          <div class="mr3 ml3">到</div>
          <el-input-number size="mini" v-model="smartReplySetting.endTime" controls-position="right" :min="1"
            :max="100000"></el-input-number>
          <div class="mr3 ml3">倒计时:</div>
          <div><el-button size="mini" type="warning">{{ smartReplySettingCountDownTime }}</el-button></div>
        </div>
        <div>
          <span class="statement">请注意，频率过快会导致此直播间的回复大部分由Ai语音控制！</span>
        </div>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称:">
            <el-input v-model="smartReplySetting.anchorName" placeholder="请输入名称">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="称呼:">
            <el-input v-model="smartReplySetting.userCallName" placeholder="请输入称呼">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getRandomInRange } from '@/utils/util';
import { EventBus } from '@/event-bus.js';
export default {
  name: 'SmartReplySetting',
  data() {
    return {
      intervalId: null,
      smartReplySettingCountDownTime: 0,
    };
  },
  props: {
  },
  watch: {},
  created() {
    EventBus.$on("changeLiveStatus", (status) => {
      if (this.smartReplySetting.open) {
        clearInterval(this.intervalId);
        if (status == 1) {
          this.startCountdown();
        }
      }
    });
  },
  computed: {
    smartReplySetting() {
      return this.pageConfig.smartReplySetting;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    EventBus.$off('changeLiveStatus');
  },
  methods: {
    startCountdown() {
      this.intervalId = setInterval(() => {
        if (this.smartReplySettingCountDownTime > 0) {
          this.smartReplySettingCountDownTime--;
        } else {
          // 倒计时结束，重新生成时间
          this.smartReplySettingCountDownTime = getRandomInRange(
            this.smartReplySetting.startTime,
            this.smartReplySetting.endTime
          );
          this.handleCountdownEnd();
        }
      }, 1000);
    },
    handleCountdownEnd() {
      EventBus.$emit(`smartReplyMatchSendWebSocket`, {});
    },
  }
};
</script>

<style lang="scss" scoped>
.statement {
  font-size: 14px;
  color: red;
  padding: 5px 0px;
  font-weight: bolder;
}
</style>
